<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/shangjia-ued.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/plugin/validate/jquery.form.js"></script>
<script type="text/javascript" src="/js/plugin/validate/jquery.validate.js"></script>


<style type="text/css">

table.validateStyle{border-collapse:collapse;border-spacing:0;color:#666;margin:20px;}
table.validateStyle th{width:100px;text-align:right;padding:4px;}
table.validateStyle td{padding:4px;}



label.error{padding:2px 10px 2px 3px;line-height:18px;vertical-align: middle;display:inline-block;*display:inline;*zoom:1;}
label.error{background-position:3px -47px;color:Red;height:18px}
label.valid{background-position:3px -247px;height:18px}
</style>

</head>
<body>
<div>
<a href="test.html?aName=aValue&bName=bValue#cName=cValue">test</a>

<form method="post" id="demo1" action="#">
	<input type="text" name="username" /><br />
	<input type="text" name="email" /><br />
    <input type="submit" />
</form>

<hr />


<script type="text/javascript">
$("#demo1").validate({
	debug:true,
	rules:{
		username:{
			required:true,
			remote:"test.html"
		}	
	}, 
	errorPlacement: function(error, element) {       
		error.insertAfter(element)
	}
})
</script>
<hr />

<form method="post" id="demo1Forme" action="">
<table width="100%" class="validateStyle" cellspacing="0" border="1" bordercolor="#aaa">
	<tr><td colspan="2">使用Dom属性验证--------------------------------</td></tr>
	<tr><th>用户名<br />(验证必填)</td><td><input type="text" name="username" class="required"/></td></tr>
	<tr><th>密码<br />(验证邮编)</th><td><input type="password" name="password"/> </td></tr>
	<tr><th>重新输入密码<br />(验证重复)</th><td><input type="password" name="password_again" equalTo="password"/> </td></tr>    
	<tr><th>数字<br />(验证数字)</th><td><input type="number" name="number"/></td></tr>
	<tr><th>邮箱<br />(验证邮箱)</th><td><input type="email"  name="email"/></td></tr>
	<tr><th>网站<br />(验证网址)</th><td><input type="url"  name="url"/></td></tr>
	<tr><th>电话<br />(验证固话)</th><td><input type="text"  name="isphone" class="isPhone"/></td></tr>
	<tr><th>手机<br />(验证手机号)</th><td><input type="text" name="isMobile" class="isMobile"/></td></tr>
	<tr><th>邮编<br />(验证邮编)</th><td><input type="text" name="isZipCode" class="isZipCode"/></td></tr>
    <tr><td colspan=2><input type="submit" value="提交"/></td></tr>
</table>
</form>
</div>
<div>
<form method="post" id="demo2Forme" action="">
<table cellpadding="4" cellspacing="4" border="1">
	<tr><td>用户名</td><td width=200><input type="text" name="username"/></td><td>验证必填</td></tr>
	<tr><td>数字</td><td><input type="text"  name="number"/></td><td>验证数字</td></tr>
	<tr><td>邮箱</td><td><input type="text"  name="email"/></td><td>验证邮箱</td></tr>
	<tr><td>网站</td><td><input type="text"  name="url"/></td><td>验证网址</td></tr>
	<tr><td>电话</td><td><input type="text"  name="isPhone"/></td><td>验证固话</td></tr>
	<tr><td>手机</td><td><input type="text" name="isMobile"/></td><td>验证手机号</td></tr>
	<tr><td>邮编</td><td><input type="text" name="isZipCode"/></td><td>验证邮编</td></tr>
	<tr><td>密码重复</td><td><input type="text" name=""/></td><td>验证邮编</td></tr>
	<tr><td>test</td><td><input type="text" name="testRule"/></td><td></td></tr>
    
</table>
<div id="error"></div>
<div><input type="submit" value="提交"/></div>
</form>
</div>
<script type="text/javascript">

$(document).ready(function() {
	jQuery.validator.setDefaults({
		focusCleanup: true,
		debug: true
	});
    $("#demo1Forme").validate({
		onfocusout:true	
	});
	
	$("#demo2Forme").validate({
        rules: {
			username: {
				required:true,
				minlength:6,
				messages:{
					required:'你不输入密码怎么行呢?',
					minlength:'密码太短啦至少6位'
				}
			},
			number:'number',
			email:'email',
			url:"url",
			isPhone:'isPhone',
			isMobile:'isMobile',
			isZipCode:'isZipCode',
			testRule:{
				required:true,
				email:true	
			}
		},massage:{
			testRule:{
				required:"必填1"	,
				email:"右键的啦"
			}	
		}
     })
});
</script>

<form method="post" class="cmxform" id="demo5" action="test.php">
	<fieldset>
		<legend>请输入用户名:test 密码：test</legend>
		<p>
			<label for="user">Username</label>
			<input id="user" name="user" />
		</p>
		<p>
			<label for="pass">Password</label>
			<input type="text" name="password" id="password"/>
		</p>

		<p>
			<input class="submit" type="submit" value="Login"/>
		</p>
	</fieldset>
</form>
<div id="result"></div>
<script type="text/javascript">
$("#demo5").validate({
	rules:{
		user:{
			required:true,
			minlength:3	
		},
		password:{
			required:true,
			minlength:4	
		}	
	},
	submitHandler: function(form) {
		$(form).ajaxSubmit({
			success:function(a) { 
				var obj = eval("("+a+")");
				console.dir(obj)
			}
		});
	}	
})
</script>


</body>
</html>
